<html>
  <head>
    <title>BookLunch Page</title>
    <script type="text/javascript" src="/js/jquery.js"></script>
    <style type="text/css">
      * { font-size:9pt; color:#333; }
      #wrapper { width:800px; margin:20px auto 0 auto;}
      #tabs { clear:both; border-bottom: 1px black solid; padding: 0 0 5px 0;}
      #tabs ul li { float:left; overflow:hidden; display:inline; padding: 0 10px 0 0; }
      #tabs ul li a { font-size:1em; display:block; padding:0 5px;  text-decoration:none; }
      #menu-list { clear:both;}
      #menu-order { clear:both; }
      #order-detail { margin: 10px 0; }
      #menu-order-result { color:red; padding: 10px 0; }
      #order-button { margin: 0 0 10px 0; }
      #footer { text-align:right; }

      table { width:700px; border: 1px #ccc solid; padding: 0 5px}
      th { border-bottom: 1px #ccc solid; }
      input { border: 0; border-bottom: 1px #ccc solid; }
      span { color:red; }
      span.user { color:blue; }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <h2>欢迎 <span class="user">{{ user_nickname }}</span></h2>
      <div id="tabs">
        <ul>
          {% for rest in rest_list %}
          <li><a class="rest-title" href="javascript:void(0)">{{ rest.name }}</a></li>
          {% endfor %}
        </ul>
      </div>
      
      <div id="menu-list">
      </div>
      
      <div id="menu-order">
        <!-- latest 10 order -->
        <table>
          <tr>
            <th width="10px"></th>
            <th width="30px">订餐号</th>
            <th>买单</th>
            <th width="120px">时间</th>
            <th width="20px">付账</th>
          </tr>
          {% for order in order_list %}
          <tr class="order-item">
            <td><input type="radio" name="order_num" value="{{ order.num }}" /></td>
            <td>{{ order.num }}</td>
            <td>{{ order.sponsor }}</td>
            <td>{{ order.order_date|date:"Y-m-d H:i"}}</td>
            <td>{% if order.expired %}
                -
                {% else %}
                <a href="javascript:void(0)">X</a>
                {% endif %}
            </td>
          </tr>
          {% endfor %}
        </table>
      </div>
      <div id="order-detail">
      </div>
      <div id="menu-order-result">
        <!-- user id? -->
      </div>
      <div id="order-button">
        <input type="button" id="menu-order-button" value="订餐" />
      </div>

      <div id="footer">
        {% if user_nickname %}
        <a href="/admin/">Admin Page</a>
        {% endif %}
        <a href="{{ url }}">{{ url_title }}</a>
      </div>
    </div>
    <script type="text/javascript">
      <!-- //
      function menu_list(rname){
          $("#menu-list").html("Loading ...");
          
          $.get("/menu/"+rname,
          function(data){
              $("#menu-list").html(data);
          });
      }

      $("#menu-order-button").click(function(){
          chks = new Array();
          $("input[name='dishname']:checked").each(function(){
              chks.push($(this).val());
          });
          if(chks.length != 0){
              chkstr = chks.join("\n");
              $.post("/menu/",
              {
                  order_menu: ""+chkstr+""
              },function(data){
                  $("#menu-order-result").html(data);
              });
          }else{
              $("#menu-order-result").html("Order at least one dish.");
          }
      });

      var restObj = { fontSize: "1em",
                      color: "#333",
                      backgroundColor: "#fff",
                      border: "0"};
      var restSelectedObj = { fontSize: "1.2em",
                      color: "#fff",
                      backgroundColor: "#333",
                      fontWeight: "bold"};
      $(".rest-title").click(function(){
          menu_list($(this).text());
          $(".rest-title").css(restObj);
          $(this).css(restSelectedObj);
      });
      $(".rest-title").each(function(){
          if($(this).text() == "{{ first_rest_name }}"){
              $(this).css(restSelectedObj);
          }else{
              $(this).css(restObj);
          }
      });
      menu_list("{{ first_rest_name }}");

      $(".order-item").hover(
      function(){
         $(this).css("backgroundColor", "#ccc"); 
      },
      function(){
          $(this).css("backgroundColor", "white"); 
      });

      $(".order-item").click(function(){
          var onum = $(this).children().children("input").val();
          $.post("/order/",
          {
              order_num: ""+onum+""
          },function(data){
              $("#order-detail").html(data);
          });
      });
      // -->
    </script>
    
  </body>
</html>
